<template>
    <div id="loginForm">
        <div class="login">
            <h3>系统登录</h3>
            <el-form style="margin-right:35px;" :label-position="labelPosition" ref="ruleForm" label-width="80px" :model="formLabelAlign">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formLabelAlign.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formLabelAlign.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code" style="margin-bottom:0;">
                    <el-row :gutter="5" style="margin:0;"> 
                        <el-col :span="14">
                            <el-input v-model="formLabelAlign.code"></el-input>
                        </el-col>
                        <el-col :span="10"><el-image fit="cover" style="height:40px;" :src="captchaUrl" /></el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="margin-bottom:5px;">
                    <el-checkbox label="记住我" v-model="memberMe" name="type"></el-checkbox>
                    <router-link style="float:right;cursor:pointer;" to="/regist">没有账号?去注册</router-link>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script>
 export default {
   name: 'Login',
   props: {
   },
   components: {

   },
   data () {
     return {
         labelPosition:'right',
         memberMe:true,
         formLabelAlign: {
          username: '',
          password: '',
          code: ''
        },
        captchaUrl:"http://22478.xyz/yi.jpg",
        //防止点击重复多次点击
        hasClick: true
     }
   },
   methods: {

       //防止点击重复多次点击(3s内不能多次点击)
       submitForm(obj){
           let _this = this;
            if(_this.hasClick){
                _this.hasClick = false;
                _this.submitData();
                setTimeout(function() {
                    _this.hasClick = true;
                }, 3000);
            }else{
                this.$message.error({message:"请勿点击过快"});
            }
       },

        //发送登录请求
        submitData(){
            this.$http({
                method:'post',
                url:'/admin/login',
                data:this.formLabelAlign
            }).then(resp=>{
                if(resp.code == 0 ){
                    window.sessionStorage.setItem("tokenStr",resp.data);
                    this.$router.replace("/home");
                }else{
                    this.$message.error({message:resp.msg});
                }
            });
        }
   },

   mounted() {

   },
   watch: {

   },
   computed: {

   },
   filters: {

   }
 }
</script>

<style scoped>

    #loginForm{
        display: flex;
        width:100%;
        height:100%;
        position: absolute;
        top:0px;
        left:0px;
        justify-content:center;
        align-items:center;
        background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255, 0.3)) ,url("~@assets/login_bg.jpg") !important;

    }

    .login{
        width:30%;
        border-radius:15px;
        background:#fff;
        border:1px solid #eaeaea;
        box-shadow:0 0 25px #cac6c6;

    }

    .login h3{
        text-align:center;
    }
</style>
